<template>
    <div class="container">
     <n-space vertical class="side">
         <n-switch v-model:value="collapsed" />
           <n-layout has-sider>
             <n-layout-sider 
             bordered  
             :collapsed-width="100"
         :width="200"
         :collapsed="collapsed"
         show-trigger
         @collapse="collapsed = true"
         @expand="collapsed = false">
         <n-menu
         :collapsed="collapsed"
         :collapsed-width="100"
         :options="menuOptions"
         />
             </n-layout-sider>
           </n-layout>
       </n-space>
     <div class="main" :style="{width:contentWidth, marginLeft:margin}">
      <jsonCrack />
     </div>
    </div>
 </template>
 
 <script setup>
import jsonCrack from "./jsoncrack.vue"
 import { ref,computed } from 'vue'
    const collapsed = ref(false)
    const menuOptions = [
      {
        label: "jsonCrack",
        key: "hear-the-wind-sing",
    // href: "https://baike.baidu.com/item/%E4%B8%94%E5%90%AC%E9%A3%8E%E5%90%9F/3199"
      },
      {
    label: "其他未知内容",
    key: "pinball-1973",
    disabled: true,
    children: [
      {
        label: "鼠",
        key: "rat"
      }
    ]
  },
  {
    label: "待定页面",
    key: "a-wild-sheep-chase",
    disabled: true
  },
  {
    label: "未知页面",
    key: "dance-dance-dance",
    children: [
      {
        type: "group",
        label: "人物",
        key: "people",
        children: [
          {
            label: "叙事者",
            key: "narrator"
          },
          {
            label: "羊男",
            key: "sheep-man"
          }
        ]
      },
      {
        label: "饮品",
        key: "beverage",
        children: [
          {
            label: "威士忌",
            key: "whisky"
          }
        ]
      },
      {
        label: "食物",
        key: "food",
        children: [
          {
            label: "三明治",
            key: "sandwich"
          }
        ]
      },
      {
        label: "过去增多，未来减少",
        key: "the-past-increases-the-future-recedes"
      }
    ]
  },
  {
    label: "开发页面",
    key: "dance-dance-dance",
    children: [
      {
        type: "group",
        label: "人物",
        key: "people",
        children: [
          {
            label: "叙事者",
            key: "narrator"
          },
          {
            label: "羊男",
            key: "sheep-man"
          }
        ]
      },
      {
        label: "饮品",
        key: "beverage",
        children: [
          {
            label: "威士忌",
            key: "whisky"
          }
        ]
      },
      {
        label: "食物",
        key: "food",
        children: [
          {
            label: "三明治",
            key: "sandwich"
          }
        ]
      },
      {
        label: "过去增多，未来减少",
        key: "the-past-increases-the-future-recedes"
      }
    ]
  }
    ]
   
    // v-bind用来绑定一个或者多个属性值，或者向另一个组件中传递props值
    // 动态计算main宽度以及左边距
    const contentWidth = computed(() => {
        if(collapsed.value===false) {
             return `calc(100% - 260px)`
        } else{
            return `calc(100% - 160px)`
        }
  })
    const margin = computed(() => {
        if(collapsed.value===false) {
            return 240+'px'
        } else{
             return 140+'px'
        }
  })
 </script>
 
 <style lang="scss" scoped>
 .container {
   display: flex;
   flex-direction: row;
   width: 100%;
   height: 100%;
   margin-top: 20px;
   margin-right: 20px;
 }
 .side {
  position: relative;
  height: 100%;
  margin-left: 20px;
  overflow: auto;
}
.main {
    position: absolute;
    height: 100%;
    margin-right: 20px;
}
 </style>